<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <title>添加接口</title>
    <meta charset="utf-8" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link rel="icon" href="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="/css/mdui.min.css" />
    <link rel="stylesheet" href="/css/style.css" />
    <link rel="stylesheet" href="/css/mdclub.css" />
</head>

<div th:include="common/adheader::header"></div>

<div class="mc-nav" id="back">
    <button class="back mdui-btn mdui-color-theme mdui-ripple"><i class="mdui-icon mdui-icon-left material-icons">arrow_back</i> 返回</button>
</div>

<div class="mdui-container mdui-p-x-2" id="add_api">
    <div class="mdui-textfield">
        <label class="mdui-textfield-label">接口名称</label>
        <input class="mdui-textfield-input" type="text" name="name" v-model="info.name" required/>
    </div>
    <div class="mdui-textfield">
        <label class="mdui-textfield-label">英文名</label>
        <input class="mdui-textfield-input" type="text" name="name" v-model="info.doc" required/>
        <div class="mdui-textfield-helper">必填！！！</div>
    </div>
    <div class="mdui-textfield">
        <label class="mdui-textfield-label">接口简介</label>
        <textarea class="mdui-textfield-input" rows="5" type="text" name="desc" maxlength="100" v-model="info.desc" required></textarea>
    </div>
    <div class="mdui-textfield">
        <label class="mdui-textfield-label">接口地址</label>
        <input class="mdui-textfield-input" type="text" name="name" v-model="info.path" required/>
    </div>
    <div class="mdui-textfield">
        <label class="mdui-textfield-label">接口示例地址</label>
        <input class="mdui-textfield-input" type="text" name="name" v-model="info.example_url" required/>
        <div class="mdui-textfield-helper">例如：?key=xxx</div>
    </div>
    <div class="mdui-textfield">
        <label class="mdui-textfield-label">返回格式</label>
        <input class="mdui-textfield-input" type="text" name="format" v-model="info.format" required/>
    </div>
    <div class="mdui-textfield">
        <label class="mdui-textfield-label">请求方式</label>
        <input class="mdui-textfield-input" type="text" name="method" v-model="info.method" required/>
    </div>
    <div class="mdui-textfield">
        <label class="mdui-textfield-label">请求参数</label>
        <textarea class="mdui-textfield-input" rows="5" name="request_parameter" type="text" v-model="info.request_parameter" required></textarea>
        <div class="mdui-textfield-helper">[名称--类型--是/否--备注]（多个参数用空格隔开）</div>

    </div>
    <div class="mdui-textfield">
        <label class="mdui-textfield-label">PHP示例代码</label>
        <textarea class="mdui-textfield-input" rows="8" name="PHP_example" type="text" v-model="info.PHP_example" required></textarea>
    </div>
    <div class="mdui-textfield">
        <label class="mdui-textfield-label">返回示例</label>
        <textarea class="mdui-textfield-input" rows="8" type="text" name="return" v-model="info.return" required></textarea>
    </div>
    <div class="mdui-textfield">
        <label class="mdui-textfield-label">接口状态</label>
        <select class="mdui-select" v-model="info.status" style="width:100%;">
            <option value="1">正常</option>
            <option value="0">维护</option>
        </select>
    </div>
    <button class="mdui-fab mdui-fab-fixed mdui-color-theme-accent mdui-ripple" @click="add_api"><i class="mdui-icon material-icons">check</i></button>
</div>


<div th:include="common/adfooter::footer"></div>
<script>
    let add_api = new Vue({
        el: '#add_api',
        data: {
            info: {
                method:"GET",
                format:"JSON",
                status:1,
                request_parameter:"[名称--类型--是/否--备注]（多个参数用+隔开）",
            },
            websetting: []
        },
        methods: {
            add_api: function() {
                // var id = getRequestParam('id');
                fetch('/api/addpai', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },

                    body: JSON.stringify({
                        id:this.info.id,
                        name : this.info.name,
                        doc : this.info.doc,
                        desc:this.info.desc,
                        path:this.info.path,
                        example_url:this.info.example_url,
                        format:this.info.format,
                        method:this.info.method,
                        request_parameter:this.info.request_parameter,
                        PHP_example:this.info.PHP_example,
                        return:this.info.return,
                        status:this.info.status
                    }),

                })
                    .then(response => response.json())
                    .then(json => {
                        if (json.code === 20000) {
                            mdui.snackbar(json.data)
                            // this.info = [];
                        }else {
                            mdui.snackbar(json.msg)
                        }

                    })
                    .catch(function(error) {
                        mdui.snackbar(error.message)
                    })
            }
        },
    // // // if (input('id') !== ''){}
    //     created (){
    //         var id = getRequestParam('id');
    //         fetch('/admin/getOneApi&id='+id)
    //             .then(response => response.json())
    //             .then(json => {
    //                 this.info = json.data;
    //                 /* 请求参数 */
    //                 var request_parameter = json.data.request_parameter;
    //                 request_parameter = JSON.parse(request_parameter).data;
    //                 var request_parameter_new = '';
    //                 $.each(request_parameter, function(key, value){
    //                     request_parameter_new += '['+value.name+'--'+value.type+'--'+value.required+'--'+value.info+']';
    //                 });
    //                 this.info.request_parameter = request_parameter_new;
    //                 /* 返回参数 */
    //                 var return_parameter = json.data.return_parameter;
    //                 return_parameter = JSON.parse(return_parameter).data;
    //                 var return_parameter_new = '';
    //                 $.each(return_parameter, function(key, value){
    //                     return_parameter_new += '['+value.name+'--'+value.type+'--'+value.msg+']';
    //                 });
    //                 this.info.return_parameter = return_parameter_new;
    //                 /* 返回状态码 */
    //                 var error_code = json.data.error_code;
    //                 error_code = JSON.parse(error_code).data;
    //                 var error_code_new = '';
    //                 $.each(error_code, function(key, value){
    //                     error_code_new += '['+value.code+'--'+value.msg+']';
    //                 });
    //                 this.info.error_code = error_code_new;
    //             });
    //     }
    // // {/if}
    });
</script>
</body>

</html>